<template>
  <div class="page flex flex-items-center justify-center">
    <el-card class="w-350px">
      <el-form ref="loginFormRef" :model="loginFormData" @keyup.enter="handleLogin">
        <div class="mb-12px w-full text-center">开放平台</div>
        <el-form-item prop="username">
          <el-input
            v-model.trim="loginFormData.mobile"
            placeholder="用户名"
            type="text"
            tabindex="1"
            :prefix-icon="User"
            size="large"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model.trim="loginFormData.password"
            placeholder="密码"
            type="password"
            tabindex="2"
            :prefix-icon="Lock"
            size="large"
            show-password
          />
        </el-form-item>
        <el-button :loading="loading" type="primary" class="w-full" @click.prevent="handleLogin"> 登 录 </el-button>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
import { reactive, toRefs } from "vue"
import { loginApi } from "@/api/user"
// import { useUserStore } from "@/stores/user"

// const userStore = useUserStore()

const state = reactive({
  loginFormData: {
    mobile: "18705692709",
    password: "123456",
  },
  loading: false
})

const { loginFormData, loading } = toRefs(state)

const handleLogin = () => {
  loading.value = true
  loginApi(loginFormData.value)
    .then((data) => {
      console.log(data,'-------- s')
      // localStorage.setItem("open-token", data.data.token)
      // userStore.token = data.data.token
    })
    .finally(() => {
      loading.value = false
    })
}
</script>
